<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">{{comp.name}}</x-header>
    <div class="content">
      <ul>

        <li v-for="(x,i) of goodstypeOrderBy" :key="i"  :style="{color:x.color}" class="ub pad my-item" @click="handleGoodsType(x)">
          <div class="title uf-1 ub-v">
            <div>{{x.name}}</div>
            <div class="sub-title">现存库存记录数 {{x.r_count}}</div>
          </div>
          <div class="value ub uc">￥{{x.value|money}}</div>
          <div class="ub uc t-gray">
            <i class="fa fa-chevron-right"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { XHeader } from 'vux'
export default {
  data() {
    return {
      comp_id:this.$route.params["comp_id"]||2,
      code:'0',
      comp:{},
      goodstypeOrderBy: []
    }
  },
  mounted() {
    this.$store.dispatch("store_city_index_goodstype", { comp_id: this.comp_id }).then((resp) => {
      this.goodstypeOrderBy = resp.body.itemMap.goodsType
      this.comp = resp.body.itemMap.comp
      var total = _.sum(this.goodstypeOrderBy, "value")
      console.log(total)
      this.goodstypeOrderBy.forEach(x => {
        x.percent = (x.value / total)<0.1?0.2:(x.value / total)
        var r = parseInt(Math.random() * 120 + x.percent * 180)
        var g = parseInt(Math.random() * 120 + x.percent * 80)
        var b = parseInt(Math.random() * 120 + x.percent * 100)
        x.color = `rgb(${r},${g},${b})`
        // x.color=Mock.mock('@rgb')
      })
    })
  },
  methods: {
    handleGoodsType(item) {
      this.$router.push({name:'StoreCityGoods',params:{comp_id:this.comp_id,code:item.code}})
    }
  },
  components: {
    XHeader,

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  .sub-title{
    font-size: 0.8em;
  }
  i {
    margin-left: 10px;
  }
}
</style>